Getting Started

Install Dependency

First thing is to install huma package into the project. To do that, we can use npm or yarn package managers.

npm:

npm install @huma-engineering/messaging

yarn:

yarn add @huma-engineering/messaging

Project Setup

Once dependency installed we are able to use HumaMessagingModule to add messaging features from the SDK. To import all functionality right away, HumaMessagingModule can beimported as folowing:

import { HumaMessagingModule } from '@huma-engineering/messaging';
...

@NgModule({
  imports: [
    HumaMessagingModule
  ],
})
export class AppModule {}

Features can be imported separately, so the feature's module should be imported:

import { OneWayModule } from '@huma-engineering/messaging/one-way';
...

@NgModule({
  imports: [
    OneWayModule
  ],
})
export class AppModule {}

To provide an ability to use networking layer components, it is required to include authentication config into the providers.

import { API_CONFIG } from '@huma-engineering/utils/api';
import { OneWayModule } from '@huma-engineering/messaging/one-way';
...

@NgModule({
  imports: [
    OneWayModule
  ],
  providers: [
    {
      provide: API_CONFIG,
      useValue: {
        hostUrl: 'https://devapi.humaapp.io',
        clientId: 'c3',
        projectId: 'p1',
      },
    }
  ]
})
export class AppModule {}

Usage

One Way Messaging modal can be added into any component's template:

<huma-messaging-modal
  *ngIf="visible"
  [visible]="visible"
  (callCancel)="visible = false"
  [messageList]="messageList"
  [okLoading]="isButtonLoading"
  (callSubmit)="confirm()"
></huma-messaging-modal>

To provide messaging functionality including requesting the backend, messaging component can be included:

<huma-messaging
  [visible]="visible"
  [messageList]="messageList"
  [userId]="userId"
  (callCloseModal)="visible = false"
></huma-messaging>